<template>
	<view class="z-index center" v-if="show">
		<view class="update-box column">
			<view class="box-font-box column">
				<view class="box-title">发现新版本{{ versionName }}</view>
				<view class="box-des"><rich-text :nodes="versionInfo"></rich-text></view>
			</view>

			<view v-if="tip.progress" class="progress-box column">
				<progress class="progress" border-radius="35" :percent="tip.progressValue" activeColor="#1c89d6" show-info stroke-width="10" />
				<view class="progress-des">{{ tip.contentText }}</view>
			</view>
			<view v-if="!tip.close && !tip.progress" class="update-btn" @tap.stop="downloadBtn">立即升级</view>
			<view v-if="tip.close" class="update-btn" @tap.stop="appClose">重启</view>
			<image v-if="!forceUpdate && !noClose" class="close-img" src="/static/icons/app_update_close.png" @tap.stop="closeUpdate"></image>
		</view>
	</view>
</template>

<script>
import { checkForUpdates } from '@/service/login.js';

export default {
	props: {
		noClose: { type: Boolean, default: false },
		isPage: { type: Boolean, default: false }
	},
	data() {
		return {
			forceUpdate: false,
			versionName: 'v1.0',
			versionCode: 1,
			versionInfo: '',
			show: false,
			tip: { progressValue: 0, progress: false, contentText: '准备下载...' },
			downloadUrl: 'https://jinzhubaobao.oss-cn-beijing.aliyuncs.com/app/jinzhubaob.apk'
		};
	},
	mounted() {
		this.getDetail();
	},
	methods: {
		async getDetail() {
			const resp = await checkForUpdates();
			if (resp) {
				this.forceUpdate = resp.forceUpdate === 'y';
				this.versionName = resp.versionName;
				this.versionCode = resp.versionCode;
				this.versionInfo = resp.versionInfo;
				this.downloadUrl = resp.downloadUrl;

				let that = this;
				this.show = true;
			}
		},
		appClose() {
			plus.runtime.restart();
		},
		downloadBtn() {
			this.getDownload();
		},
		closeUpdate() {
			this.show = false;
		},
		getDownload() {
			let lastProgressValue = 0;
			const that = this;
			let dtask = plus.downloader.createDownload(this.downloadUrl, {}, function(download, status) {
				if (status == 200) {
					that.tip = {
						progressValue: 100,
						contentText: '正在安装文件...',
						progress: true
					};
					plus.runtime.install(
						download.filename,
						{},
						function() {
							that.tip = {
								contentText: '应用资源更新完成！',
								close: true,
								progress: false
							};
							that.forceUpdate = true;
						},
						function(e) {
							that.tip = {
								contentText: '安装文件失败！',
								progress: false
							};
						}
					);
				} else {
					that.tip = {
						contentText: '文件下载失败...',
						progress: false
					};
				}
			});
			dtask.start();
			dtask.addEventListener('statechanged', function(task, status) {
				if (task.state == 1) {
					that.tip = {
						progressValue: 0,
						contentText: '准备下载...',
						progress: true
					};
				} else if (task.state == 2) {
					that.tip = {
						progressValue: 0,
						contentText: '开始下载...',
						progress: true
					};
				} else if (task.state == 3) {
					const progress = parseInt((task.downloadedSize / task.totalSize) * 100);
					if (progress - lastProgressValue >= 2) {
						lastProgressValue = progress;
						that.tip = {
							progressValue: progress,
							contentText: '正在下载中...',
							progress: true
						};
					}
				}
			});
		}
	}
};
</script>

<style scoped>
.z-index {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: #000;
	background: rgba(0, 0, 0, 0.3);
	z-index: 1000;
}

/* 盒子内容居中 */
.center {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* 内容纵向水平且居中 */
.column {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.update-box {
	position: relative;
	z-index: 1000;
	width: 586rpx;
	height: 734rpx;
	background: url('')
		no-repeat center/100%;
	margin-bottom: 240rpx;
}

.update-btn {
	color: #ffffff;
	text-align: center;
	line-height: 90rpx;
	font-size: 38rpx;
	width: 400rpx;
	height: 90rpx;
	border-radius: 35px;
	background: linear-gradient(to right, #077ff6, #47a1fa);
	position: absolute;
	bottom: 30rpx;
	left: 92rpx;
}

.progress-box {
	width: 420rpx;
	position: absolute;
	bottom: 30rpx;
	left: 92rpx;
}

.progress {
	width: 420rpx;
	border-radius: 35px;
}

.close-img {
	width: 70rpx;
	height: 140rpx;
	z-index: 1000;
	position: absolute;
	bottom: -140rpx;
	left: 258rpx;
}

.box-font-box {
	/* text-align: center; */
	width: 100%;
	position: absolute;
	top: 330rpx;
}

.box-title {
	width: 100%;
	font-size: 40rpx;
	font-weight: bold;
	text-align: center;
}

.box-des-scroll {
	width: 526rpx;
	height: 180rpx;
	font-size: 30upx;
	text-align: left;
	margin-top: 40rpx;
}

.box-des {
	padding: 0 10upx;
	margin-bottom: 20rpx;
	font-size: 32rpx;
	margin-top: 40rpx;
	color: #666666;
}

.progress-des {
	margin-top: 20rpx;
	font-size: 28rpx;
	color: #6c6c6c;
}
</style>
